<template>
	<view class="page" id="page">
		<view class="hader">

			<view class="header-content">
				<view class="left">
					<image :src="userInfo.avatarUrl" mode="aspectFill" class="avatar" />
					<view class="info-box">
						<text class="user-name">{{ userInfo.nickname ? userInfo.nickname :'微信用户' }}</text>
						<text class="user-moblie">{{userInfo.mobile}}</text>
					</view>
				</view>

				<view class="right" @click="editInfo()">
					修改信息
				</view>
			</view>

			<view class="day">
				<text>今天是停车易 Link 陪伴您的第{{userInfo.dayNum}}天</text>
			</view>
		</view>
		<view class="container">
			<view class="group-item" v-if="userInfo.identity" @click="resourceReview()">
				<text>资源审批</text>
				<text>></text>
			</view>
			<view class="group-item" @click="myInfo()" style="color: #999;">
				<text>我的消息</text>
				<text>></text>
			</view>
			<view class="group-item" @click="myCollect()">
				<text>我的收藏</text>
				<text>></text>
			</view>
			<view class="group-item" @click="suggestedFeedback()">
				<text>建议反馈</text>
				<text>></text>
			</view>
			<view class="group-item" @click="contactUs()">
				<text>联系我们</text>
				<text>></text>
			</view>
		</view>

		<view class="modal" v-if="suggestedFeedbackModal">
			<view class="modal-content">
				<view class="modal-title">反馈与建议</view>

				<view class="suggested-feedback">
					<uni-easyinput type="textarea" v-model="suggestedText" placeholder="请输入建议与反馈" />
				</view>

				<view class="modal-buttons">
					<button @click="suggestedFeedbackModal = false" style="margin-right: 5px;">取消</button>
					<button @click="subMitSuggest()">提交</button>
				</view>
			</view>
		</view>

		<view class="modal" v-if="showAboutUsModal">
			<view class="modal-content">
				<view class="modal-title">联系我们</view>
				<view class="wechat"><text>微信号：{{modalContent}} </text> <text @click="copyText(modalContent)">复制</text>
				</view>
				<view class="qrCode">
					<text> 微信二维码：点击预览然后长按扫一扫</text>
					<image @click="bigPreview()" src="@/static/manage.png" mode=""></image>
				</view>
				<view class="modal-buttons">
					<button @click="showAboutUsModal = false">我知道了</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxLogin,
		getPhone,
		wxUserInfo,
		fetchSuggestFeedback
	} from '@/api/weixin';
	export default {
		data() {
			return {
				suggestedFeedbackModal: false,
				suggestedText: '',
				showAboutUsModal: false,
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled',
				},
				modalContent: 'playbyte',
				userInfo: {
					nickName: 'test',
					avatarUrl: require('@/static/image/uniui-header-bg.png'),
					mobile: '13595279527',
					dayNum: 0
				},
				avatarUrl: require('@/static/image/uniui-header-bg.png'),
				nickName: '点击登录',
				noLogin: false
			};
		},
		onLoad(options) {
			if (options.token) {
				console.log("options: ", options);
				console.log("this.noLogin: ", this.noLogin);
				this.noLogin = true
			}
			const info = wx.getStorageSync('userInfo')
			if (info) {
				this.userInfo = JSON.parse(info)
			}
		},
		onShow() {
			this.getLoginUserInfo()
		},
		methods: {
			getLoginUserInfo() {
				// if (!this.noLogin) {
				// 	uni.showToast({
				// 		title: '登录中'
				// 	})
				// }

				uni.login({
					provider: 'weixin',
					success: async (codeRes) => {
						console.log(" 登录请求code: ", codeRes.code);
						const loginRes = await wxLogin({
							code: codeRes.code
						});
						uni.setStorageSync('token', loginRes.token);
						console.log("登录成功 loginRes: ", loginRes);
						if (this.noLogin) {
							uni.showToast({
								title: '登录成功'
							})
						}
						const infoParams = {
							sessionKey: loginRes.data.sessionKey,
						};
						const response = await wxUserInfo(infoParams);
						console.log("个人信息--response.data: ", response.data);
						wx.setStorageSync('userInfo', JSON.stringify(response.data))
						this.userInfo = response.data
						if (!response.data.mobile) {
							uni.navigateTo({
								url: '/pages/userInfo/login'
							})
						}
					},
				});
			},
			editInfo() {
				wx.navigateTo({
					url: `/pages/userInfo/edit-info?data=${encodeURIComponent(JSON.stringify(this.userInfo))}`
				});
				return
				uni.showToast({
					title: '敬请期待'
				})
			},
			resourceReview() {
				uni.navigateTo({
					url: '/pages/subPack/resource-review/resource-review'
				})
			},
			myInfo() {
				return
				uni.showToast({
					title: '敬请期待'
				})
				return
			},
			myCollect() {
				// uni.showToast({
				// 	title: '敬请期待'
				// })
				// return
				uni.navigateTo({
					url: '/pages/subPack/collect-list/collect-list'
				})
			},
			copyText(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						console.log('success', item);
						uni.showToast({
							icon: 'none',
							title: item + '复制成功'
						});
					}
				});
			},
			bigPreview() {
				return
				wx.previewImage({
					current: '', // 当前显示图片的http链接
				})
			},
			suggestedFeedback() {
				this.suggestedFeedbackModal = true
				this.suggestedText = ''
			},
			contactUs() {
				this.showAboutUsModal = true
			},
			async subMitSuggest() {
				const params = {
					feedbackContent: this.suggestedText
				}
				const res = await fetchSuggestFeedback(params)
				if (res.code == 0) {
					uni.showToast({
						title: '建议成功'
					})
					console.log("res: ", res);
					this.suggestedFeedbackModal = false
				}
			},
			getUserInfo() {
				uni.showLoading({
					title: '加载中',
				});
				uni.getUserProfile({
					desc: '登录后可同步数据',
					success: (obj) => {
						console.log('obj', obj)
						uni.setStorageSync('userInfo', obj.userInfo);
						this.avatarUrl = obj.userInfo.avatarUrl;
						this.nickName = obj.userInfo.nickName;
						uni.login({
							provider: 'weixin',
							success: async (codeRes) => {
								console.log(" codeRes.code: ", codeRes.code);
								const loginRes = await wxLogin({
									code: codeRes.code
								});
								uni.setStorageSync('token', loginRes.token);
								const infoParams = {
									sessionKey: loginRes.data.sessionKey,
									signature: obj.signature,
									rawData: obj.rawData,
									encryptedData: obj.encryptedData,
									iv: obj.iv,
								};
								wxUserInfo(infoParams);
							},
						});
					},
					fail: () => {
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {
						uni.hideLoading();
					},
				});
			},
			// 检查授权是否过期
			checkSession() {
				uni.checkSession({
					success: () => {
						const userInfo = uni.getStorageSync('userInfo');
						if (userInfo) {
							this.avatarUrl = userInfo.avatarUrl;
							this.nickName = userInfo.nickName;
						}
					},
					fail: () => {
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						uni.login({
							provider: 'weixin',
						});
					},
				});
			},
		},
		mounted() {
			this.checkSession();
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background: white;

		.hader {
			padding: 15rpx 24rpx;
			border-bottom: 1px solid #f7f8f5;

			.header-content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}

					.info-box {
						display: flex;
						flex-direction: column;
						margin-left: 16rpx;

						.user-name {
							font-size: 12px;
							color: #999;
						}

						.user-moblie {
							margin-top: 10px;
							font-size: 12px;
							color: #999;
						}
					}
				}



				.right {
					width: 50px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					padding: 0px 5px;
					border: 1px solid #000;
					border-radius: 20px;
					color: #000;
					font-size: 12px;
				}
			}

			.day {
				color: #999;
				font-size: 12px;
				padding: 5px 0;
			}

		}

		.container {
			.group-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				border-bottom: 1px solid #f7f8f5;
			}
		}

		// modal
		/* 遮罩层 */
		.modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;

			/* 窗口 */
			.modal-content {
				background-color: white;
				/* padding: 20px; */
				width: 600rpx;
				border-radius: 8rpx;
				position: relative;
				padding: 15px;

				.modal-title {
					padding: 30rpx;
					padding-top: 15rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					font-family: '宋体';
				}

				.suggested-feedback {}

				.wechat {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.qrCode {
					display: flex;
					flex-direction: column;
					align-items: center;

					>text {
						width: 100%;
						margin: 5px 0;
					}

					>image {
						width: 200px;
						height: 200px;
					}
				}

				.modal-buttons {
					width: 100%;
					display: flex;
					align-items: center;
				}

				.modal-buttons button {
					margin-top: 10px;
					width: 100px;
					border: none;
					background-color: #74bfe7;
					color: #fff;
					border-radius: 10px;
				}
			}
		}
	}
</style>
